<template>
  <view>
    <view class="css-popups">
      <!-- 一 -->

      <view v-for="goods in falsePopups" :key="goods.id">
        <u-popup :show="show" mode="bottom" @open="open">
          <!-- 弹出层 开始 -->
          <!-- 标题 -->
          <view class="css-popup">
            <view class="css-popup-title">{{ '配送时间' }}</view>
          </view>
          <!-- 选择器 -->
          <view class="css-radio">
            <u-radio-group
              v-model="radiovalue1"
              placement="column"
              @change="groupChange"
            >
              <u-radio
                size="25"
                class="css-u-radio"
                :customStyle="{ marginBottom: '10px' }"
                v-for="(item, index) in deliverytime"
                :key="index"
                :label="item.name"
                :name="item.name"
                @change="radioChange"
              >
              </u-radio>
            </u-radio-group>
          </view>
          <!-- 底部确认按钮 -->
          <view class="css-footer">
            <button class="custom-btn" @click="popups_add">确定</button>
          </view>
          <!-- icon图标 -->
          <view class="css-icon">
            <u-icon
              name="close"
              color="#909399"
              size="18"
              @click="popups_close"
            ></u-icon>
          </view>
          <!-- 弹出层 结束 -->
        </u-popup>

        <!-- false状态渲染层 -->
        <view class="css-button-popups" @click="gainId(goods.id)">
          <view ref="listmessage">{{ goods.title }}</view>
          <view class="css-button-popups-two">
            <text>{{ goods.text }}</text>
            <u-icon name="arrow-right" color="#606266" size="14"></u-icon>
          </view>
        </view>
      </view>
      <!-- 买家备注 -->
      <view class="css-notestoBuyers">
        <text>买家备注</text>
        <input
          @input="changeinput"
          type="text"
          v-model="valueinput"
          placeholder="建议留言前先与商家沟通确认"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'chuangjiandingdanzujian',
  props: {
    popupslist: {
      type: Array,
      default: () => []
    }
  },

  data () {
    return {
      show: false,
      // 选择器 双向绑定
      radiovalue1: '',
      // 弹出层 true / false
      // 配送时间
      deliverytime: [
        {
          name: '不限',
          disabled: false
        },
        {
          name: '工作日',
          disabled: false
        },
        {
          name: '双休或节假日',
          disabled: false
        }
      ],
      // false状态下弹出层
      falsePopups: [
        {
          id: 0,
          title: '配送时间',
          text: '不限'
        },
        {
          id: 1,
          title: '支付方式',
          text: '在线支付'
        },
        {
          id: 2,
          title: '支付渠道',
          text: '支付宝'
        }
      ],

      valueinput: '',
      addid: 0,
      // 留言
      leaveword: ''
    }
  },

  mounted () {},

  methods: {
    // 弹出窗口 关闭
    popups_close () {
      this.show = false
      // console.log('close');
    },
    // 弹出窗口确认按钮
    popups_add () {
      this.show = false
    },
    // 每一列的点击
    gainId (id) {
      // 赋值addid全局
      this.addid = id
      const popupslist = this.popupslist
      this.show = true
      if (this.addid === id) {
        this.deliverytime = popupslist[id]
      } else if (this.addid === id) {
        this.deliverytime = popupslist[id]
      } else {
        this.deliverytime = popupslist[id]
      }
      // console.log(this.$refs.listmessage);
    },
    open () {
      // console.log('open');
    },
    // 选择器change事件 2
    radioChange (event) {
      this.$emit('checkvalue', event)
    },
    // 弹出层内勾选后的值
    groupChange (ee) {
      this.falsePopups[this.addid].text = this.radiovalue1
      // console.log(this.falsePopups);
    },
    changeinput () {
      this.$emit('eventinput', this.valueinput)
    }
  }
}
</script>

<style lang="scss" scoped>
// 弹出层
.css-popups {
  background-color: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  height: 364rpx;
  font-size: 26rpx;
  color: #333;

  .css-popup {
    position: relative;
    .css-popup-title {
      line-height: 1;
      padding: 40rpx 0;
      text-align: center;
      font-size: 32rpx;
      font-weight: normal;
      border-bottom: 1rpx solid #ddd;
      color: #444;
    }
  }
  .css-radio {
    padding: 12rpx 20rpx;
  }

  .css-footer {
    padding: 20rpx 0;
    .custom-btn {
      flex: 1;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin: 0 20rpx;
      color: #fff;
      border-radius: 72rpx;
      color: #fff;
      background-color: #27ba9b;
      font-size: 28rpx;
    }
  }

  .css-icon {
    font-family: uicon-iconfont;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    flex-direction: row;
    align-items: center;
  }

  .css-button-popups {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80rpx;
    font-size: 26rpx;
    color: #333;
    background-color: #fff;
    .css-button-popups-two {
      display: flex;
      line-height: 60rpx;
    }
  }

  .css-notestoBuyers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80rpx;
    font-size: 26rpx;
    color: #333;
    text {
      width: 125rpx;
    }
    input {
      flex: 1;
      text-align: right;
      margin: 20rpx 0;
      padding-right: 20rpx;
      font-size: 26rpx;
      color: #999;
    }
  }
}
</style>
